<template>
    <!-- 地图 -->
    <div class="map-echart">
        <div class="map-back" v-show="backShow" @click="backTouch"></div>
        <div class="map-visuali" v-show="!backShow" ref="mapId"></div>
        <div class="map-visuali" v-if="backShow" ref="cityMapId"></div>
    </div>
</template>

<script>
// import china from '../../map/china.js'
import china from '../../map/china.json'
import huBeiMap from '../../map/420000_full.json'
export default {
    data () {
        return {
            backShow:false,
            geoCoordMap:{
                '黑龙江省': [127.9688, 45.368],
                '内蒙古自治区': [110.3467, 41.4899],
                "吉林省": [125.8154, 44.2584],
                '北京市': [116.4551, 40.2539],
                "辽宁省": [123.1238, 42.1216],
                "河北省": [114.4995, 38.1006],
                "天津市": [117.4219, 39.4189],
                "山西省": [112.3352, 37.9413],
                "陕西省": [109.1162, 34.2004],
                "甘肃省": [103.5901, 36.3043],
                "宁夏回族自治区": [106.3586, 38.1775],
                "青海省": [101.4038, 36.8207],
                "新疆维吾尔自治区": [87.9236, 43.5883],
                "西藏自治区": [91.11, 29.97],
                "四川省": [103.9526, 30.7617],
                "重庆市": [108.384366, 30.439702],
                "山东省": [117.1582, 36.8701],
                "河南省": [113.4668, 34.6234],
                "江苏省": [118.8062, 31.9208],
                "安徽省": [117.29, 32.0581],
                "湖北省": [114.3896, 30.6628],
                "浙江省": [119.5313, 29.8773],
                "福建省": [119.4543, 25.9222],
                "江西省": [116.0046, 28.6633],
                "湖南省": [113.0823, 28.2568],
                "贵州省": [106.6992, 26.7682],
                "云南省": [102.9199, 25.4663],
                "广东省": [113.12244, 23.009505],
                "广西壮族自治区": [108.479, 23.1152],
                "海南省": [110.3893, 19.8516],
                "上海市": [121.4648, 31.2891],
                "台湾省": [120.8893, 23.6516],
            },
            dataInfo:[
                {
                    name: "北京市",
                    value: 5
                },
                {
                    name: "天津市",
                    value: 30
                },
                {
                    name: "河北省",
                    value: 150
                },
                {
                    name: "山西省",
                    value: 120
                },
                {
                    name: "内蒙古自治区",
                    value: 40
                },
                {
                    name: "辽宁省",
                    value: 40
                },
                {
                    name: "吉林省",
                    value: 40
                },
                {
                    name: "黑龙江省",
                    value: 60
                },
                {
                    name: "上海市",
                    value: 10
                },
                {
                    name: "江苏省",
                    value: 60
                },
                {
                    name: "浙江省",
                    value: 50
                },
                {
                    name: "安徽省",
                    value: 90
                },
                {
                    name: "福建省",
                    value: 70
                },
                {
                    name: "江西省",
                    value: 76
                },
                {
                    name: "山东省",
                    value: 5500
                },
                {
                    name: "河南省",
                    value: 100
                },
                {
                    name: "湖北省",
                    value: 40
                },
                {
                    name: "湖南省",
                    value: 50
                },
                {
                    name: "重庆市",
                    value: 40
                },
                {
                    name: "四川省",
                    value: 115
                },
                {
                    name: "贵州省",
                    value: 145
                },
                {
                    name: "云南省",
                    value: 100
                },
                {
                    name: "西藏自治区",
                    value: 25
                },
                {
                    name: "陕西省",
                    value: 100
                },
                {
                    name: "甘肃省",
                    value: 60
                },
                {
                    name: "青海省",
                    value: 20
                },
                {
                    name: "宁夏回族自治区",
                    value: 110
                },
                {
                    name: "新疆维吾尔自治区",
                    value: 30
                },
                {
                    name: "广东省",
                    value: 10
                },
                {
                    name: "广西壮族自治区",
                    value: 100
                },
                {
                    name: "海南省",
                    value: 40
                },
                {
                    name: "台湾省",
                    value: 0
                },
            ],
            mapJson:[
                // {
                //     name: "台湾",
                //     json: taiWanMap,
                // },
                // {
                //     name: "海南",
                //     json: haiNanMap,
                // },
                // {
                //     name: "安徽",
                //     json: anHuiMap,
                // },
                // {
                //     name: "江西",
                //     json: jiangXiMap,
                // },
                // {
                //     name: "湖南",
                //     json: huNanMap,
                // },
                // {
                //     name: "云南",
                //     json: yunNanMap,
                // },
                // {
                //     name: "贵州",
                //     json: guiZhouMap,
                // },
                // {
                //     name: "广东",
                //     json: guangDongMap,
                // },
                // {
                //     name: "福建",
                //     json: fuJianMap,
                // },
                // {
                //     name: "浙江",
                //     json: zheJiangMap,
                // },
                // {
                //     name: "江苏",
                //     json: jiangSuMap,
                // },
                // {
                //     name: "四川",
                //     json: siChuanMap,
                // },
                // {
                //     name: "重庆",
                //     json: chongQingMap,
                // },
                {
                    name: "湖北",
                    json: huBeiMap,
                },
                // {
                //     name: "河南",
                //     json: heNanMap,
                // },
                // {
                //     name: "山东",
                //     json: shanDongMap,
                // },
                // {
                //     name: "吉林",
                //     json: jiLinMap,
                // },
                // {
                //     name: "辽宁",
                //     json: liaoNingMap,
                // },
                // {
                //     name: "天津",
                //     json: tianJinMap,
                // },
                // {
                //     name: "北京",
                //     json: beiJingMap,
                // },
                // {
                //     name: "河北",
                //     json: heBeiMap,
                // },
                // {
                //     name: "山西",
                //     json: shanXiMap,
                // },
                // {
                //     name: "陕西",
                //     json: shanXi2Map,
                // },
                // {
                //     name: "宁夏",
                //     json: ningXiaMap,
                // },
                // {
                //     name: "青海",
                //     json: qingHaiMap,
                // },
                // {
                //     name: "西藏",
                //     json: xiZangMap,
                // },
                // {
                //     name: "黑龙江",
                //     json: heiLongJiangMap,
                // },
                // {
                //     name: "内蒙古",
                //     json: neimengGuMap,
                // },
                // {
                //     name: "甘肃",
                //     json: ganSuMap,
                // },
                // {
                //     name: "新疆",
                //     json: xinJiangMap,
                // },
                // {
                //     name: "广西",
                //     json: guangxiMap,
                // },
            ],
            dataMap:[{
                name:"湖北",
                value:[114.3896, 30.6628]
            }],
            dataCity:[]
        }
    },
    mounted () {
        this.initChart()
    },
    methods: {
        convertData(data) {
            var res = [];
            for (var i = 0; i < data.length; i++) {
                var geoCoord = this.geoCoordMap[data[i].name];
                if (geoCoord) {
                    res.push({
                        name: data[i].name,
                        value: geoCoord.concat(data[i].value)
                    });
                }
            }
            return res;
        },
        initChart(){
            var data = [];
            this.$echarts.registerMap('china', china)
            // 初始化 echarts 实例
            const myChart = this.$echarts.init(this.$refs.mapId);
             // 指定图表的配置项和数据
            const option = {
                geo: {
                    map: "china",
                    aspectScale: 0.8,
                    zoom:1.1,
                    layoutCenter: ["50%", "50%"],
                    layoutSize: "120%",
                    itemStyle: {
                        normal: {
                            areaColor: {
                                type: "linear-gradient",
                                x: 0,
                                y: 1200,
                                x2: 1000,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#152E6E", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#0673AD", // 50% 处的颜色
                                    },
                                ],
                                global: true, // 缺省为 false
                            },
                            areaColor: '#013C62',//地区颜色
                            shadowColor: '#182f68',//阴影颜色
                            shadowOffsetX: 0,//阴影偏移量
                            shadowOffsetY: 25,//阴影偏移量
                            opacity: 0.5,
                        },
                        emphasis: {
                            show:false,
                            areaColor: "#0f5d9d",
                        },
                    },

                    regions: [
                        {
                            name: "南海诸岛",
                            itemStyle: {
                                areaColor: "rgba(0, 10, 52, 1)",
                                borderColor: "rgba(0, 10, 52, 1)",
                                normal: {
                                    opacity: 0,
                                    label: {
                                        show: false,
                                        color: "#009cc9",
                                    },
                                },
                            },
                            label: {
                                show: false,
                                color: "#FFFFFF",
                                fontSize: 12,
                            },
                        },
                    ],
                },
                series: [
                    // {
                    //     symbolSize: 0,
                    //     label: {
                    //         normal: {
                    //             formatter: '{b}',
                    //             position: 'center',
                    //             show: true
                    //         },
                    //         emphasis: {
                    //             show: false
                    //         }
                    //     },
                    //     itemStyle: {
                    //         normal: {
                    //             color: '#fff',
                    //             fontSize: 18
                    //         }
                    //     },
                    //     name: 'light',
                    //     type: 'scatter',
                    //     coordinateSystem: 'geo',
                    //     data: this.convertData(this.dataInfo),
                    // },
                    {
                        type: "map",
                        mapType: "china",
                        selectedMode: "false",
                        aspectScale: 0.8,
                        layoutCenter: ["50%", "50%"], //地图位置
                        layoutSize: "120%",
                        zoom: 1.1, //当前视角的缩放比例
                        // roam: true, //是否开启平游或缩放
                        scaleLimit: {
                            //滚轮缩放的极限控制
                            min: 1,
                            max: 2,
                        },
                        label: {
                            show: true,
                            color: "#FFFFFF",
                            fontSize: 12,
                            emphasis: {
                                show: false,
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "#0c3653",
                                borderColor: "#1cccff",
                                borderWidth: 1.8,
                            },
                            emphasis: {
                                areaColor: "#56b1da",
                                label: {
                                    show: false,
                                    color: "#fff",
                                },
                            },
                        },
                        data: []
                    },
                    {
                        name: 'Top 5',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'image://https://cdn.bjftyx.net/bjftyx/echarts/mark-icon.png',
                        symbolSize: [100,100],
                        symbolOffset:['5%', '-20%'] ,
                        label: {
                            normal: {
                                formatter: '{b}',
                                show: true,
                                offset: [0, -38]
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#FFFFFF',
                                fontSize: 24,
                            },
                        },
                        data: this.dataMap,
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        zlevel: 1
                    },
                ],
            }
        
            // 使用配置项显示图表
            myChart.setOption(option);
            myChart.on('click', (params) => {
                console.log('111')
                console.log(params)
                if (params.componentType === 'series') { // 点击事件发生在系列上（即地图上）
                    const provinceName = params.name; // 获取点击的省份名称
                    const parentName = params.data.name || ''
                    if (provinceName !== 'China' && parentName) { // 如果不是整个中国，则加载对应省份的地图数据并显示
                        var chooseName = this.mapJson.filter((item) => {
                            //我们根据名字来判断是否选择一种
                            return item.name == parentName
                        });
                        if(chooseName && chooseName.length > 0){
                            this.backShow = true
                            this.$nextTick(() => {
                                this.dataCity = [
                                    {
                                        name: "武汉市",
                                        parentName: "湖北",
                                        simplePinyin: "HBS",
                                        value: [114.298572, 30.584355],
                                    }
                                ]
                                this.$echarts.registerMap(provinceName, chooseName[0].json); // 以湖北省省为例，实际使用时根据点击的省份动态加载对应地图数据文件
                                this.showProvinceMap(provinceName); // 调用方法显示省份地图
                            })
                            
                        }
                        
                    }
                }
            });
        },
        showProvinceMap(provinceName) {
            var data = [];
            const provinceChart = this.$echarts.init(this.$refs.cityMapId); // 重用同一个容器显示省份地图，或者可以创建一个新的容器来更清晰地展示省份地图和切换效果。
            const option = {
                geo: {
                    map: provinceName,
                    aspectScale: 0.8,
                    zoom:1.1,
                    layoutCenter: ["50%", "50%"],
                    layoutSize: "120%",
                    itemStyle: {
                        normal: {
                            areaColor: {
                                type: "linear-gradient",
                                x: 0,
                                y: 1200,
                                x2: 1000,
                                y2: 0,
                                colorStops: [
                                    {
                                        offset: 0,
                                        color: "#152E6E", // 0% 处的颜色
                                    },
                                    {
                                        offset: 1,
                                        color: "#0673AD", // 50% 处的颜色
                                    },
                                ],
                                global: true, // 缺省为 false
                            },
                            areaColor: '#013C62',//地区颜色
                            shadowColor: '#182f68',//阴影颜色
                            shadowOffsetX: 0,//阴影偏移量
                            shadowOffsetY: 25,//阴影偏移量
                            opacity: 0.5,
                        },
                        emphasis: {
                            show:false,
                            areaColor: "#0f5d9d",
                        },
                    }
                },
                series : [
                    {
                        type: 'map',
                        map: provinceName,
                        aspectScale: 0.8, //长宽比
                        showLegendSymbol: false, // 存在legend时显示
                        scaleLimit: {
                            //滚轮缩放的极限控制
                            min: 1,
                            max: 2,
                        },
                        label: {
                            show: true,
                            color: "#FFFFFF",
                            fontSize: 14,
                            emphasis: {
                                show: false,
                            }
                        },
                        itemStyle: {
                            normal: {
                                areaColor: "#0c3653",
                                borderColor: "#1cccff",
                                borderWidth: 1.8,
                            },
                            emphasis: {
                                areaColor: "#56b1da",
                                label: {
                                    show: false,
                                    color: "#fff",
                                },
                            },
                        },
                        data: []
                    },
                    {
                        name: 'Top 5',
                        type: 'scatter',
                        coordinateSystem: 'geo',
                        symbol: 'image://https://cdn.bjftyx.net/bjftyx/echarts/mark-icon.png',
                        symbolSize: [100,100],
                        symbolOffset:['5%', '-20%'] ,
                        label: {
                            normal: {
                                formatter: '{b}',
                                show: true,
                                offset: [0, -38]
                            },
                        },
                        itemStyle: {
                            normal: {
                                color: '#FFFFFF',
                                fontSize: 24,
                            },
                        },
                        data: this.dataCity,
                        showEffectOn: 'render',
                        rippleEffect: {
                            brushType: 'stroke'
                        },
                        hoverAnimation: true,
                        zlevel: 1
                    },
                ]
            }; // 根据省份配置相应的图表选项，例如只显示一个省的地图等。这里省略具体配置。
            provinceChart.setOption(option); // 设置配置项并显示。注意这里需要根据实际省份的地图数据进行调整。例如，你可能需要单独加载并注册每个省份的地图数据。
            // provinceChart.on('click', (params) => {
            //     console.log('222')
            //     console.log(params)
            //     if (params.componentType === 'series') { // 点击事件发生在系列上（即地图上）
            //         const provinceName = params.name; // 获取点击的省份名称
            //         const info = {...params.data}
            //         if (provinceName !== 'China' && this.backShow) { // 如果不是整个中国，则加载对应省份的地图数据并显示
            //             this.$router.push({
            //                 path: '/cityIndex',
            //                 query: {
            //                     name: info.name,
            //                     simplePinyin:info.simplePinyin
            //                 }
            //             })
            //         }
            //     }
            // });
        },
        backTouch(){
            this.backShow = false
            // this.initChart();
        }
    }
};
</script>

<style lang="scss" class>
.map-echart{
    position: relative;
    width: 100%;
    height: 600px;
    .map-back{
        position: absolute;
        top: 60px;
        left: 12px;
        width: 80px;
        height: 44px;
        background: url("../../assets/back.png") center no-repeat;
        background-size: 100% 100%;
        z-index: 99;
    }
    .map-visuali{
        width: 100%;
        height: 600px;
    }
}
</style>